{% extends "docker_engine/base.html" %}


{% load staticfiles %}

{% block extra-css %}
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/assets/fancybox/source/jquery.fancybox.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/assets/uniform/css/uniform.default.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/assets/chosen-bootstrap/chosen/chosen.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/css/custom.css' %}" />
{% endblock %}


{% block content %}
<div id="page" class="dashboard">
    <!-- BEGIN SAMPLE FORM PORTLET-->   
    <div class="widget">
        <div class="widget-title">
            <h4><i class="icon-reorder"></i> Task Information</h4>                   
        </div>
        <div class="widget-body form">
            <!-- BEGIN FORM-->
            <form action="/docker/create/" method="post" class="form-horizontal">
                {% csrf_token %}
                <div class="control-group">
                    <label class="control-label" for="task_name">Task Name:</label>
                    <div class="controls">
                        <input type="text" class="span6" name="task_name" value="{{ task.name }}" readonly="true" />
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="task_name">Application:</label>
                    <div class="controls">
                        <input type="text" class="span6" name="application_name" value="{{ task.application.name }}" readonly="true" />
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="task_name">Running Node:</label>
                    <div class="controls">
                        <input type="text" class="span6" name="node_name" value="{{ task.node.name }}" readonly="true" />
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="task_name">Start Time:</label>
                    <div class="controls">
                        <input type="text" class="span6" name="start_time" value="{{ task.start_at }}" readonly="true" />
                    </div>
                </div>
            </form>
            <!-- END FORM-->             
        </div>
    </div>
    <!-- END SAMPLE FORM PORTLET-->

    <hr />

     <div class="widget">
        <div class="widget-title">
            <h4><i class="icon-reorder"></i> Running Containers</h4>                  
        </div>
        <div class="widget-body">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th width="10%" class="hidden-phone">Name</th>
                        <th width="10%" class="hidden-phone">Image</th>
                        <th width="10%" class="hidden-phone">Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for container in containers %}
                    <tr class="odd gradeX">
                        <td>
                            <a href="{% url 'container_detail' container.name %}">{{ container.name }}</a>
                        </td>
                        <td>{{ container.image.name }}</td>
                        <td>
                            <p class="container_status">
                                {% if container.status == "R" %}
                                Running
                                {% elif container.status == "S" %}
                                Stopped
                                {% endif %}
                            </p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <hr />

    <div class="row-fluid">
        <!-- BEGIN CPU CHART PORTLET-->
        <div class="span6">
            <div class="widget6">
                <div class="widget-title">
                    <h4><i class="icon-reorder"></i> CPU Usage</h4>
                    <span class="tools">
                        <a href="javascript:;" class="icon-refresh"></a>        
                    </span>                         
                </div>
                <div class="widget-body">
                    <div id="cpu_chart" class="chart"></div>
                </div>
            </div>
        </div>
        <!-- END CPU CHART PORTLET-->


        <!-- BEGIN Memory CHART PORTLET-->
        <div class="span6">
            <div class="widget">
                <div class="widget-title">
                    <h4><i class="icon-reorder"></i> Memory Usage</h4>
                    <span class="tools">
                        <a href="javascript:;" class="icon-refresh"></a>        
                    </span>                    
                </div>
                <div class="widget-body">
                    <div id="memory_chart" class="chart"></div>
                </div>
            </div>
        </div>
        <!-- END Memory CHART PORTLET-->
    </div>

    <div class="row-fluid">
        <!-- BEGIN Disk I/O CHART PORTLET-->
        <div class="span6">
            <div class="widget">
                <div class="widget-title">
                    <h4><i class="icon-reorder"></i> Disk I/O Usage</h4>
                    <span class="tools">
                        <a href="javascript:;" class="icon-refresh"></a>        
                    </span>                   
                </div>
                <div class="widget-body">
                    <div id="disk_io_chart" class="chart"></div>
                </div>
            </div>
        </div>
        <!-- END Disk I/O CHART PORTLET-->

        <!-- BEGIN Network Traffic CHART PORTLET-->
        <div class="span6">
            <div class="widget">
                <div class="widget-title">
                    <h4><i class="icon-reorder"></i> Network Traffic Usage</h4>
                    <span class="tools">
                        <a href="javascript:;" class="icon-refresh"></a>        
                    </span>                    
                </div>
                <div class="widget-body">
                    <div id="network_traffic_chart" class="chart"></div>
                </div>
            </div>
        </div>
        <!-- END Network Traffic CHART PORTLET-->
    </div>
</div>
{% endblock %}


{% block extra-js %}
<script src="{% static 'docker_engine/assets/chosen-bootstrap/chosen/chosen.jquery.min.js' %}"></script>
<script src="{% static 'docker_engine/assets/uniform/jquery.uniform.min.js' %}"></script>
<script src="{% static 'docker_engine/assets/fancybox/source/jquery.fancybox.pack.js' %}"></script>
<script src="{% static 'docker_engine/assets/flot/jquery.flot.js' %}"></script>
<script src="{% static 'docker_engine/assets/flot/jquery.flot.resize.js' %}"></script>
<script src="{% static 'docker_engine/assets/flot/jquery.flot.stack.js' %}"></script>
<script src="{% static 'docker_engine/js/task/detail.js' %}"></script>
{% endblock %}